在 Astro 項目中，Pages扮演了重要角色。這些頁面位於 src/pages/ 子目錄下，負責處理網站的路由、數據加載和整體頁面佈局。
今天，我們將探討 Astro 頁面的類型、路由策略和如何連接它們。
Astro 支援多種頁面文件類型，包括：
Astro 採用了一種稱為"基於文件的路由"的策略，這意味著 src/pages/ 目錄中的每個文件都將成為您網站上的一個端點，其路由基於其文件路徑。更令人驚奇的是，單個文件還可以使用動態路由生成多個頁面，這樣您可以更靈活地組織內容。
在 Astro 頁面中，您可以使用標準的 HTML <a> 元素來連接到網站中的其他頁面，這樣可以實現簡單而有效的導航。
Astro 頁面通常以 .astro 文件副檔名結尾，並支持與 Astro 組件相同的功能。以下是一個簡單的範例：
---
---
<html lang="en">
<head>
<title>My Homepage</title>
</head>
<body>
<h1>Welcome to my website!</h1>
</body>
</html>
為了避免在每個頁面上重複相同的 HTML 元素，您可以將常見的 <head> 和 <body> 元素移動到自己的佈局組件中，並根據需要使用多個佈局組件
---
import MySiteLayout from "../layouts/MySiteLayout.astro";
---
<MySiteLayout>
<p>My page content, wrapped in a layout!</p>
</MySiteLayout>
Astro 將位於 src/pages/ 中的 Markdown（.md）文件視為網站中的頁面。如果安裝了 MDX Integration，同樣的規則也適用於 MDX（.mdx）文件。這些文件通常用於文本密集的頁面，如 blog 文章和文檔。
尤其是對於 Markdown 文件，頁面佈局非常有用。Markdown 文件可以使用特殊的佈局前置設置來指定一個佈局組件，這樣它的內容就會包裝在完整的 <html>...</html> 頁面文檔中。
---
layout: "../layouts/MySiteLayout.astro"
title: "My Markdown page"
---
# Title
This is my page, written in **Markdown.**
具有 .html 文件擴展名的文件可以直接放在 src/pages/ 中，作為站點上的頁面。請注意，某些關鍵的 Astro 功能在 HTML 組件中不受支持。
如果需要自定義 404 錯誤頁面，可以在 src/pages/ 中創建一個 404.astro 或 404.md 文件，這將生成一個 404.html 頁面，大多數部署服務將找到並使用它。
在 Astro 中，Pages是處理網站的路由和頁面佈局的關鍵元素。您可以根據需求創建不同類型的頁面文件，使用簡單的 HTML 元素來實現頁面間的導航。
iThome鐵人賽
看影片追技術